var index = 1;				// 关卡数
var countDown_num = 12;		// 计时器初始默认值
var bigBox = document.getElementById("bigBox");
var flag = true;

// 开始游戏界面
function play(){
	bigBox.innerHTML = "<h2>眼明手快</h2><span>请开始你的表演...</span><h1></h1><button id='btn1' class='btn btn1' onclick='init()'>开始游戏</button><button id='btn2' class='btn btn2'>快速模式</button>";
}
play();

// 初始化通关后的界面并重新渲染 
function init(){
	bigBox.innerHTML = "<div id='checkPoint' class='flex'><div id='box1' class='box box1'></div><div id='box2' class='box box2'></div></div><div id='countDown'></div><div id='gameContent' class='clearfix'></div>";
	
	var gameContent = document.getElementById("gameContent");
	var card = gameContent.getElementsByClassName("card");
	var box1 = document.getElementById("box1");
	var box2 = document.getElementById("box2");
	var arr = [1,2,3,4,5,6,7,8,9,0];		// 数字方块初始的数值，为了保证0-9都存在
	var color = ["#EB8E53","#F37D5F","#F2CF4F","#DFC99C","#E85A36"]
	var click_arr = [];		// 点击数字方块将数字保存到此数组
	var random_arr = [];	// 将右上角随机生成的数字保存到此数组
	flag = true;			// 当点错后无法继续进行点击
	gameContent.innerHTML = "";				// 通关后初始化数字方块的内容
	box1.innerHTML = "第"+ index +"关";		// 左上角更新关卡数
	box2.innerHTML = "<h3>按顺序找到下列数字：</h3>";
	var countDown = document.getElementById("countDown");
	// 每一关倒计时开始的数值
	if(countDown_num <= 15){
		countDown_num = countDown_num + ( parseInt(countDown_num * 0.5) );
	}
	countDown.innerText = "倒计时：" + countDown_num;
	
	
	// 随机生成8个数字并存放在arr数组
	for(var j = 0; j < 10; j++){
		var num1 = Math.random()*10;
		num1 = Math.floor(num1);
		arr.push(num1)
	}
	// 打乱数组
	function shuffle(a) {
		var len = a.length;
		for(var i=0;i<len;i++){
           var end = len - 1 ;
           var index = (Math.random()*(end + 1)) >> 0;
           var t = a[end];
           a[end] = a[index];
           a[index] = t;
		}
		return a;
	};
	shuffle(arr);
	
	// 循环输出数字方块
	for(var k = 0; k < arr.length; k++){
		// 渲染数字方块
		tempate(arr[k]);
		// 随机改变数字方块的颜色
		var num2 = Math.random() * color.length;
		num2 = Math.floor(num2);
		card[k].style.backgroundColor = color[num2];
	}
	function tempate(num){
		gameContent.innerHTML += "<div class='card fl'>"+num+"</div>";
	}
	
	// 生成右上角随机数并渲染
	for(var i = 0; i < index+3; i++){
		var num = Math.random()*10;
		num = Math.floor(num);
		// 去重后将随机数添加到random_arr
		if(random_arr.indexOf(num) == -1){
			random_arr.push(num)
		}
	}
	for(var l = 0; l < random_arr.length; l++){
		tempate1(random_arr[l]);
	}
	function tempate1(num){
		box2.innerHTML += "<span>"+num+",</span>";
	}
	
	// 定时器
	var t1 = setInterval(function(){
		if(countDown_num <= 0){
			countDown_num = 13;		// 计时器初始值，因为后面还会执行 countDown_num-- 所以初始值为13
			clearTimeout(t1);		// 清除定时器
			index--;				// 关卡数值-1作为得分
			bigBox.innerHTML = "<h2>游戏结束</h2><span>时间到，本次闯关得分</span><h1>"+ index +"</h1><button id='btn1' class='btn btn1' onclick='init()'>重新开始</button><button id='btn2' class='btn btn2' onclick='play()'>返回主菜单</button>";
			index = 1;				// 初始化关卡数
		}
		countDown_num--;
		countDown.innerText = "倒计时：" + countDown_num;
	},1000)
	
	// 点击数字方块触发事件 
	for(let n = 0; n < card.length; n++){
		card[n].addEventListener("click",function(e){
			if(flag == true){
				// 如果点击黑色背景的数字方块，不执行操作
				if(this.className.indexOf("changeBlack") == -1 && this.className.indexOf("changeRed") == -1){
					click_arr.push(parseInt(card[n].innerText.trim()));
				}
				// 点击获取的数组的最后一个值
				var cli_last = click_arr[click_arr.length-1];
				// 右上角随机数组的最后一个值
				var ran_last = random_arr[click_arr.length-1];
				if(cli_last == ran_last && flag == true){
					// 添加类名，使背景颜色变为黑色
					this.classList.add("changeBlack");
					this.style.backgroundColor = "black";
					// 如果点击获取的数组与右上角随机数组  长度相等并 且 最后一个值相等
					if(click_arr.length == random_arr.length){
						index++;			// 闯关数+1
						clearTimeout(t1);	// 清除定时器
						card[n].addEventListener("transitionend",function(){
							init();			// 重新渲染页面
						})
					}
				}else{
					flag = false;
					if(this.className.indexOf("changeRed") == -1){
						clearTimeout(t1);		// 清除定时器
						countDown_num = 12;		// 初始化计时器
						index--;				// 闯关数-1，作为所得的得分
						this.style.backgroundColor = "red";
						this.classList.add("changeRed");	// 添加类名方便查询点击到错误的数字方块
						bigBox.addEventListener("transitionend",function(){
							if(card[n].className.indexOf("changeRed") != -1){
								card[n].classList.remove("changeRed");	// 移除类名
								bigBox.innerHTML = "<h2>游戏结束</h2><span>点错咯，本次闯关得分</span><h1>"+ index +"</h1><button id='btn1' class='btn btn1' onclick='init()'>重新开始</button><button id='btn2' class='btn btn2' onclick='play()'>返回主菜单</button>";
								index = 1;					// 初始化关卡数
							}
						})
					}
				}
			}
		})
	}
}